import Vue from "vue";
import Vuex from "vuex";
import { sync } from "vuex-router-sync";
import router from "../router/index.js"; // vue-router 实例

Vue.use(Vuex);
import layout from "./modules/layout";
import module1 from "./modules/module1";
import module2 from "./modules/module2";
import routerView from "./modules/routerView.js";
//模块化测试
const store = new Vuex.Store({
  state: {
    a: [{ name: "张三" }, { name: "李四" }, { name: "王五" }],
    lock: false,
    responseConfig: [],
  },
  getters: {},
  mutations: {},
  actions: {},
  modules: {
    layout,
    module1,
    module2,
    routerView,
  },
});
store.watch(
  (state) => {
    return state.layout.isCollapse;
  },
  (newVal, oldVal) => {
    console.log(newVal, oldVal);
    sessionStorage.setItem("isCollapse", newVal);
  }
  // {
  //   deep: true, //一个 boolean 值，设置为 true 时，可以深度观察目标对象，也就是说，目标对象内部值的变化也会触发回调函数。默认为 false
  //   immediate: true,//一个 boolean 值，如果设置为 true，那么回调将在侦听开始之后立即被调用。默认为 false。
  //   flush: "post",//这个选项用于改变侦听器运行的时机。这个选项接受三个值:'pre', 'post', 'sync'。默认是'pre'。如果你选择’pre’，那么这个观察者回调会在视图更新之前运行。选择’post’，它会在视图更新之后运行。选择’sync’，则这个回调会立即运行
  // }
);
//动态创建vuex
store.registerModule("register", {
  namespaced: true,
  state: {
    ceshi: "11",
  },
  getters: {},
  mutations: {},
  actions: {},
});
store.registerModule(["register", "myModule"], {
  namespaced: true,
  state: {
    a: "11",
  },
  getters: {},
  mutations: {},
  actions: {},
});
//这个可以让route的数据自动创建一个vuex的模块,具体没什么用
const unsync = sync(store, router); // 返回值是 unsync 回调方法

//动态创建vuex数据
let module = require.context('./ceshirequireContext' , false ,/index.js/)
console.log(module.keys());
module.keys().forEach(key => {
  let moduleItem = module(key).default
  console.log(moduleItem ,'1111');
  store.registerModule(moduleItem.name , moduleItem)
})

export default store;
